<template>
  <view class="content-wrap">
    <u-navbar
      title="矿数卫士"
      back-icon-color="#fff"
      title-color="#fff"
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
    ></u-navbar>

    <view class="qusi u-flex">
      <text>趋势变化</text>
      <u-switch class="u-m-l-20 u-m-r-20" v-model="checked" @change="change"></u-switch>
      <text>{{ checked ? "按日" : "按月" }}</text>
    </view>
    <view class="charts-box">
      <qiun-data-charts type="line" :echartsH5="true" :echartsApp="true" :eopts="eopts" :chartData="chartData" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
  },
  data() {
    return {
      chartData: {
        eopts: {},
        categories: [],
        series: [],
      },
      params: {},
      checked: false,
    };
  },
  onLoad(obj) {
    this.params = JSON.parse(obj.item);
    this.setOpts();
  },
  onReady() {
    this.getData();
  },
  methods: {
    change(status) {
      this.switchChangeTrend();
    },
    switchChangeTrend() {
      if (this.checked) {
        const arr = this.trendChangeListOrigin.map((list) => {
          return {
            name: list.moduleName,
            id: list.id,
            data: list.dayTrendNodeList.map((node) => node.anomalousNum),
            smooth: true,
            // value: list.dayTrendNodeList.map(node => Math.floor(Math.random() * 50)),
            lineX: list.dayTrendNodeList.map((node) => node.day),
            label: { show: false },
          };
        });
        this.trendChangeList = arr;
      } else {
        const arr = this.trendChangeListOrigin.map((list) => {
          return {
            name: list.moduleName,
            id: list.id,
            data: list.monthTrendNodeList.map((node) => node.anomalousNum),
            smooth: true,
            // value: list.monthTrendNodeList.map(node => Math.floor(Math.random() * 50)),
            lineX: list.monthTrendNodeList.map((node) => node.month),
            label: { show: false },
          };
        });
        this.trendChangeList = arr;
      }
      this.chartData.categories = this.trendChangeList[0].lineX;
      this.chartData.series = this.trendChangeList;
    },
    async getData() {
      const { body } = await this.$post("/guard/home/page/getModuleAnomalousTrend", this.params);

      if (Array.isArray(body)) {
        this.trendChangeListOrigin = body;
        await this.switchChangeTrend();
      }
    },
    setOpts() {
      this.eopts = {
        title: {
          text: "",
          textAlign: "center",
          top: "50%",
          right: "-5%",
          rotate: -90,
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            yAxisIndex: [0],
            showDetail: false,
            start: 0,
            end: 100,
            top: "60",
            left: "5%",
          },
        ],
        legend: {
          rotation: -90,
          left: "16%",
          top: "center",
          orient: "vertical",
        },
        graphic: [],
        grid: {
          left: "45%",
          right: "70",
          top: "60",
        },
        color: [
          "#0EECF1",
          "#ffff00",
          "#ffa500",
          "#0000FF",
          "#C43CC4",
          "#9400d3",
          "#9f79ee",
          "#696969",
          "#ff00ff",
          "#bdb76b",
          "#006400",
          "#00bfff",
          "#66cd00",
          "#8b8989",
          "#ff1493",
        ],
        tooltip: {
          show: true,
          backgroundColor: "#ffffff",
          trigger: "axis",
          triggerOn: "mousemove",
          borderColor: "#288CFE",
          borderWidth: 1,
          padding: [5, 10],
          extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);Opacity: 1;z-index:999;transform: rotate(90deg);",
          textStyle: {
            color: "#666666",
          },
        },
        xAxis: {
          type: "value", //数据
          position: "top", //x 轴的位置【top bottom】
          nameRotate: -90, //坐标轴名字旋转，角度值。
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            rotate: 90, //刻度标签旋转的角度，
          },
          // scale: true, //是否是脱离 0 值比例
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "#666666",
            },
          },
          type: "category",
          inverse: "true", //是否是反向坐标轴。
          axisLabel: { rotate: -90 },
          boundaryGap: false,
        },
        visualMap: [],
        series: [],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.charts-box {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  height: 100%;
}

.qusi {
  transform: rotate(90deg);
  position: fixed;
  top: 50%;
  left: calc(100vw - 10em);
  width: 15em;
  z-index: 99999;
}
</style>
